<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
  th:with="title='xxs商城-历史订单页面',active='home'"
>
  <header>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../js/slide.js"></script>
    <style>
      * {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      body {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
      }
      .box {
        margin-top: 6%;
      }
      h2 {
        text-align: center;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        padding: 30px 0;
      }

      /* Table Styles */

      .table-wrapper {
        margin: 10px 70px 70px;
        box-shadow: 0px 35px 50px rgba(0, 0, 0, 0.2);
      }

      .fl-table {
        border-radius: 5px;
        font-size: 12px;
        font-weight: normal;
        border: none;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        background-color: white;
      }

      .fl-table td,
      .fl-table th {
        text-align: center;
        padding: 8px;
      }

      .fl-table td {
        border-right: 1px solid #f8f8f8;
        font-size: 12px;
      }

      .fl-table thead th {
        color: #ffffff;
        background: #4fc3a1;
      }

      .fl-table thead th:nth-child(odd) {
        color: #ffffff;
        background: #324960;
      }

      .fl-table tr:nth-child(even) {
        background: #f8f8f8;
      }

      /* Responsive */

      @media (max-width: 767px) {
        .fl-table {
          display: block;
          width: 100%;
        }
        .table-wrapper:before {
          content: 'Scroll horizontally >';
          display: block;
          text-align: right;
          font-size: 11px;
          color: white;
          padding: 0 0 10px;
        }
        .fl-table thead,
        .fl-table tbody,
        .fl-table thead th {
          display: block;
        }
        .fl-table thead th:last-child {
          border-bottom: none;
        }
        .fl-table thead {
          float: left;
        }
        .fl-table tbody {
          width: auto;
          position: relative;
          overflow-x: auto;
        }
        .fl-table td,
        .fl-table th {
          padding: 20px 0.625em 0.625em 0.625em;
          height: 60px;
          vertical-align: middle;
          box-sizing: border-box;
          overflow-x: hidden;
          overflow-y: auto;
          width: 120px;
          font-size: 13px;
          text-overflow: ellipsis;
        }
        .fl-table thead th {
          text-align: left;
          border-bottom: 1px solid #f7f7f9;
        }
        .fl-table tbody tr {
          display: table-cell;
        }
        .fl-table tbody tr:nth-child(odd) {
          background: none;
        }
        .fl-table tr:nth-child(even) {
          background: transparent;
        }
        .fl-table tr td:nth-child(odd) {
          background: #f8f8f8;
          border-right: 1px solid #e6e4e4;
        }
        .fl-table tr td:nth-child(even) {
          border-right: 1px solid #e6e4e4;
        }
        .fl-table tbody td {
          display: block;
          text-align: center;
        }
      }
    </style>
  </header>
  <body>
    <div class="header_con">
      <div class="header">
        <div class="welcome fl">欢迎来到xxs商城!</div>
        <div class="fr">
          <div class="login_btn fl" th:if="${session.uaccount} ne null">
            <a href=""> 欢迎您：<em th:text="${session.uaccount}"></em> </a>
            <span>|</span>
            <a href="http://localhost:8896/goods/quit">退出</a>
          </div>
          <div class="login_btn fl" th:if="${session.uaccount} eq null">
            <a href="http://localhost:8893/admin/tologin"> 请您登陆 </a>
          </div>
          <div class="user_link fl">
            <span>|</span>
            <a href="/goods/cartAll">我的购物车</a>
            <span>|</span>
            <a href="/goods/getAllorder">我的订单</a>
          </div>
        </div>
      </div>
    </div>

    <div class="search_bar clearfix">
<!--      <a th:href="@{'getAll?uaccount='+${session.uaccount}}" class="logo fl"-->
<!--        ><img src="../../img/logo.png"-->
<!--      /></a>-->
      <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;我的订单</div>
      <div class="search_con fr">
        <input
          type="text"
          style="background: top"
          class="input_text fl"
          name=""
          placeholder="搜索商品"
        />
        <input type="button" class="input_btn fr" name="" value="搜索" />
      </div>
    </div>
    <div class="box">
      <h2>我的订单</h2>
      <div class="table-wrapper">
        <table class="fl-table">
          <tr>
            <td>订单号</td>
            <td>商品名称</td>
            <td>购买数量</td>
            <td>总价</td>
            <td>购买时间</td>
          </tr>
          <tr th:each="order:${order}">
            <td th:text="${order.id}"></td>
            <td th:text="${order.goodsname}"></td>
            <td th:text="${order.number}"></td>
            <td th:text="${order.price}"></td>
            <td th:text="${order.time}"></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2019 北京xxs商城有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </body>
</html>
